<!DOCTYPE html>
<html>

<head>
	<title>图形编辑</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<script type="module" src="./serveconfig.js"></script>

	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		:root {
			--main-bg-color: #1b334d;
			--text-color: #black;
			--border-color: #808080;
			--canvas-bg-color: #B2B2B2;
			--link-color: #19c;
			--ruler-color: #B2B2B2;
			--icon-bg-color: #2086B6;
			--icon-bg-color-hover: #C8F05A;
			--input-color: #B2B2B2;
			--global-se-spin-input-width: 82px;
			--elix-thumbnail-height: 80px;
			--elix-thumbnail-width: 80px;
		}

		.ems_y {
			cursor: pointer;
		}

		svg foreignObject {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		svg text {
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		svg text::selection {
			background: none;
		}

		body {
			overflow: hidden;
			background-color: lightgray;
			background-color: black;
			/*background-image: url("/static/pictool/images/svgbg.png");*/
		}

		.refreshPeriod {
			position: absolute;
			bottom: 5px;
			right: 5px;
			height: 20px;
			width: 70px;
			font-size: 10px;
			color: rgb(117, 114, 114);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		.freshtext {
			width: 10px;
			background-color: var(--main-bg-color);
			padding-left: 3px;
			border: none;
			outline: none;
			color: lightgray;
		}

		.secPosition {
			position: absolute;
			bottom: 3px;
			right: 14px;
			height: 20px;
			width: 5px;
			font-size: 15px;
			color: rgb(117, 114, 114);
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		.svg_show {
			display: grid;
			/*grid-template-columns: 80px;*/
			grid-template-areas:
				"left main";
			font-size: 12px !important;
			background: var(--main-bg-color);
			font-family: Verdana, Helvetica, Arial;
			color: var(--text-color);
			user-select: text;
			width: 100%;
			height: 100%;
		}

		#tools_left {
			grid-area: left;
			border-right: 3px solid #72797A;
			overflow-y: unset;
			text-align: center;
			scrollbar-width: none;
			/* Firefox */
			height: 100vh;
			width: 80px;
		}

		#tools_left .itemWrap {
			display: flex;
			flex-wrap: wrap;
			padding: 7px 7px;
		}

		#svg {
			grid-area: main;
			border-right: 3px solid #6a99a0;
			overflow: hidden;
			scrollbar-width: none;
			/* Firefox */
		}

		.whiteColor {
			color: white;
		}

		.loading_mar {
			top: 300px
		}

		.ems text {
			width: 100px;
		}

		@keyframes twinkle {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0.5;
			}
		}
	</style>
</head>

<body id="bodyHei" onUnload="" style="overflow: hidden;">
	<div id="svgShow" class="svg_show">
		<div id="svg" style="width:100%;height:100vh"></div>
	</div>
	<div class="loading_mar" id="waitDiv">
	</div>
	<div class="refreshPeriod">刷新周期<input id="freshSec" type="text" value="2" class="freshtext" maxlength="1"
			onfocus="this.select();"><span class="secPosition">s</span></div>
</body>
<script type="module">
	import SvgShow from "./svgshow/svgshow.js"
	import serviceUrl from "./serveconfig.js"

	var svgShow = new SvgShow(document.getElementById('svgShow'), serviceUrl, false, false)
	svgShow.init()


    //页面全屏防抖处理
    window.addEventListener("resize", debounce(changeSvgWorH, 600))
	window.onload = function () {
		window.addEventListener("message", function (e) {
			recieveData(e)
		})
	}
	

	const recieveData = (data) => {
		if (data.data.type === 'close') {
			svgShow.closeWork()
		} else if (data.data.type === 'openDisplay') {
			svgShow.displayAccident(data.data.data)
		}
	}

	function changeSvgWorH() {
		var svg = document.getElementById("svg");
		const computedStyle = window.getComputedStyle(svg);
		var width = computedStyle.width.replace("px", "");
		var height = computedStyle.height.replace("px", "");
		console.log(svgShow, width, height)


		svgShow.setSVG_SHOW({
			width: width,
			height: height
		})

	}


	function debounce(fn, delay = 500, immediate) {
	let timer = null
	return function(...args) {
        const that = this
        if(timer) {
            clearTimeout(timer)    //直接清除定时器（关键）
            timer = null
        }
        if(immediate) {
            let rightNow = !timer 
            timer = setTimeout(() => {
                timer = null
            }, delay)
            if(rightNow) {
                fn.apply(that, args)
            }
        } else {
            timer = setTimeout(() => {
                fn.apply(that, args)
            }, delay)
        }
	}
}





</script>

</html>